<template>
	<view :class="['nav-wrap',{'nav-wrap2': isLogin && isHome}]" :style="{left: menuLeft,zIndex: zIndex}">
		<view :class="['container', {'noContainer': windowSize.windowWidth >= MAX_SIZEiZE}]">
			<view :class="['nav-content',!isLogin && windowSize.windowWidth < MAX_SIZEiZE ? 'navContent2' : '']">
				<match-media :min-width="MAX_SIZEiZE" style="width:35vw">
					<view class="nav-left">
						<view class="notice-icon"></view>
						<uni-notice-bar :speed="80" scrollable :backgroundColor="`transparent`" color='var(--color-2)'
							:text="activeTitle" @click="clickNoticeBar" style="cursor: pointer;" />
					</view>
				</match-media>
				<!-- 已登录  -->
				<block v-if="isLogin">
					<!-- 以下内容只有在首页小屏的时候显示，其它页面显示页面的顶部导航栏 -->
					<match-media v-if="isHome && smallScreen" :max-width="MAX_SIZEiZE-1" style="flex: 1;">
						<view class="nav-right">
							<view class="user-info">
								<image :src="userInfo.avatar" class="avatar"></image>
								<view>
									<view>
										<text class="username">{{userInfo && userInfo.username}}</text>
										<text class="vip-level">vip{{userInfo.level && userInfo.level.grade}}</text>
									</view>
									<text class="uid">ID.{{userInfo.id}}</text>
								</view>
							</view>
							<waves class="waves-wrap" @onTap="refreshMoney">
								<image class="coin-icon" src="@/static/coin.png" mode="aspectFit"></image>
								<view class="money"> {{ userMoney }} </view>
								<uni-icons :class="{'refresh':isRefresh}" type="refreshempty" size="18"
									color="#fff"></uni-icons>
							</waves>
						</view>
						<view class="nav-left">
							<view class="notice-icon"></view>
							<uni-notice-bar :speed="80" scrollable :backgroundColor="`transparent`"
								color='var(--color-2)' :text="activeTitle" @click="clickNoticeBar" />
						</view>
					</match-media>
					<match-media v-if="bigScreen" :min-width="MAX_SIZEiZE"
						style="flex: 1;display: flex;align-items: center;">
						<view class="nav-right">
							<view class="user-info">
								<image :src="userInfo.avatar" class="avatar"></image>
								<text class="username">{{userInfo && userInfo.username}}</text>
								<text class="vip-level">vip{{userInfo.level && userInfo.level.grade}}</text>
							</view>
							<waves class="waves-wrap" @onTap="refreshMoney">
								<image class="coin-icon" src="@/static/coin.png" mode="aspectFit"></image>
								<view class="money"> {{ userMoney }} </view>
								<uni-icons :class="{'refresh':isRefresh}" type="refreshempty" size="18"
									color="#fff"></uni-icons>
							</waves>
						</view>
					</match-media>
				</block>
				<block v-else>
					<match-media v-if="bigScreen" :min-width="MAX_SIZEiZE">
						<view class="nav-right" style="justify-content: flex-end;">
							<waves itemClass="login_btn" @onTap="handleJump(0)">
								{{$t('Page.component.login')}}
							</waves>
							<waves class="login_btn ks_btn" @onTap="handleJump(1)">
								{{$t('Page.component.zc')}}
							</waves>
						</view>
					</match-media>
					<match-media v-if="smallScreen && isHome" v-else :max-width="MAX_SIZEiZE - 1"
						style="width: calc(100% + 30px);">
						<view class="noLoginH5">
							<view class="nav-right" style="justify-content: flex-end;">
								<waves itemClass="login_btn" @onTap="handleJump(0)">
									{{$t('Page.component.login')}}
								</waves>
								<waves class="login_btn ks_btn" @onTap="handleJump(1)">
									{{$t('Page.component.zc')}}
								</waves>
							</view>
							<view class="nav-left" style="margin: 12px 0 12px -4px; width: calc(100% + 8px);">
								<view class="notice-icon"></view>
								<uni-notice-bar :speed="80" scrollable :backgroundColor="`transparent`"
									color='var(--color-2)' :text="activeTitle" @click="clickNoticeBar"
									style="cursor: pointer;" />
							</view>
						</view>
					</match-media>
				</block>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	import {
		EXPAND_MENU_FALSE,
		EXPAND_MENU_TRUE,
		MAX_SIZEiZE
	} from "@/common/app.js"
	import {
		Debounce
	} from '@/utils/common.js'
	export default {
		props: {
			isHome: {
				type: Boolean | String,
				default: false
			},
			zIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				EXPAND_MENU_TRUE,
				EXPAND_MENU_FALSE,
				MAX_SIZEiZE,
				screenWidth: true,
				rotate: false,
				pcMenu: [{
					title: this.$t('Page.component.logout'),
					path: '/pages/public/popup/logoutPopup',
					fontClass: 'icon-tuichudenglu',
					type: 'logoutPopup'
				}],
				isRefresh: false,
				switchColor: 'var(--color-1)'
			};
		},
		watch: {
			userMoney(newVal) {
				console.log('138newVal: ', newVal);
				this.isRefresh = true
				setTimeout(() => {
					this.isRefresh = false
				}, 1000)
			}
		},
		computed: {
			...mapState({
				isExpandMenu: state => state.app.isExpandMenu,
				userInfo: state => state.app.userInfo,
				userMoney: state => state.app.userMoney || '0.00',
				homeData: state => state.app.homeData,
				windowSize: state => state.app.windowSize,
			}),
			...mapGetters('app', ['isLogin', 'bigScreen', 'smallScreen']),
			menuLeft() {
				if (this.screenWidth) {
					return this.isExpandMenu ? EXPAND_MENU_TRUE : EXPAND_MENU_FALSE
				} else {
					return '0'
				}
			},
			activeTitle() {
				return (this.homeData?.message?.length && this.homeData?.message[0]?.title) || this.$t('Page.home.zwxx')
			},
		},
		mounted() {
			let screenWidth = uni.getWindowInfo().windowWidth
			if (screenWidth >= this.MAX_SIZEiZE) {
				this.screenWidth = true
			} else {
				this.screenWidth = false
			}
			this.handleResize()
			uni.onWindowResize(this.handleResize);
			console.log('isLogin: ', this.isLogin);
			console.log('bigScreen: ', this.bigScreen);
			console.log('smallScreen: ', this.smallScreen);
		},
		beforeDestroy() {
			uni.offWindowResize(this.handleResize);
		},
		methods: {
			...mapMutations('app', ['setLeftPageWidth', 'setIsExpandMenu', 'saveTheme']),
			...mapActions('app', ['getRecycle', 'getUserInfo']),
			clickNoticeBar() {
				if (this.isLogin && this.homeData.message.length) {
					const item = {
						...this.homeData.message[0],
						isNotice: true
					}
					uni.navigateTo({
						url: `/pages/Notify/notifyDetail?item=${encodeURIComponent(JSON.stringify(item))}`
					})
				}
			},
			/**
			 * 使用根标签的自定义属性切换主题
			 */
			swithMode() {
				// #ifdef H5
				const theme = document.documentElement.dataset.theme
				if (theme === 'red') {
					document.documentElement.dataset.theme = 'black'
					this.saveTheme('black')

				} else {
					document.documentElement.dataset.theme = 'red'
					this.saveTheme('red')
				}
				// #endif 
			},
			refreshMoney() {
				this.getRecycle();
				this.getUserInfo();
			},

			goHome() {
				uni.switchTab({
					url: '/pages/component/view/view'
				})
			},
			handleResize(e) {
				if (!e) return
				if (e?.size?.windowWidth >= this.MAX_SIZEiZE) {
					this.screenWidth = true
				} else {
					this.screenWidth = false
				}
			},

			// handleJump(type) {
			// 	uni.navigateTo({
			// 		url: '/pages/auth/auth' + '?type=' + type
			// 	})
			// },
			handleJump: Debounce(function(type) {
				console.log('handleJump', type)
				uni.navigateTo({
					url: '/pages/auth/auth' + '?type=' + type
				})
			}, 500),
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .uni-swiper-dots-horizontal {
		text-align: center;
		white-space: nowrap;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
		right: 0 !important;
		top: 50% !important;
		display: flex;
		flex-direction: column;
	}

	.nav-wrap {
		padding: calc(var(--status-bar-height)) 30px 0;
		animation-name: fadeInDown;
		animation-duration: 0.5s;
		color: var(--color-white);
		position: fixed;
		top: 0;
		right: 0;
		background: var(--bg-1);
		transition: all .2s ease;

		.container {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;

			.nav-content {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.nav-left {
					display: flex;
					align-items: center;
					border: 1px solid var(--border-color-2);
					border-radius: 100px;
					background: var(--bg-5);
					overflow: hidden;

					.notice-icon {
						width: 30px;
						height: 28px;
						margin: 0 10px;
						background: var(--bg-image-1) no-repeat;
						background-size: 100% 100%;
					}

					/deep/.uni-noticebar {
						padding: 10px 15px 10px 0;
						margin-bottom: 0;
					}
				}

				.nav-right {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					margin-left: 10px;
				}

				.waves-wrap {
					height: 25px;
					display: flex;
					align-items: center;
					padding: 5px;
					border-radius: 10px;
					background: var(--bg-4);
					box-shadow: inset 0px 4px 4px 0px var(--box-shadow-color-1);
					border-radius: 130px;
					box-sizing: border-box;


					.coin-icon {
						width: 28px;
						height: 28px;
						min-width: 28px;
						min-height: 28px;
					}

					.money {
						margin: 0 4px;
					}

					.refresh {
						animation: turntable 1s infinite;
					}
				}

				.deposit {
					display: flex;
					align-items: center;
					position: relative;
					overflow: visible;

					.depositBtn {
						padding: 6px;
						border-radius: 10px;
						font-size: 14px;
						background: var(--bg-2);
						box-shadow: inset 0px 4px 4px 0px var(--box-shadow-color-1);
						color: #fff;
						margin-left: 10px;

						.gift {
							width: 18px;
							height: 18px;
							margin-left: 5px;
							animation: trends 1s ease-in-out infinite;
						}
					}

					.tooltip {
						position: absolute;
						top: -12px;
						left: -15px;
						background-color: #FFC64A;
						color: #dd244a;
						font-size: 12px;
						min-height: auto !important;
						padding: 0 10px;
						border-radius: 3px;
						font-weight: 600;
						z-index: 999;
						transform: scale(0.8);
						animation: trends 1s ease-in-out infinite;

						&::before {
							content: '';
							position: absolute;
							bottom: 0px;
							right: 8px;
							width: 0;
							height: 0;
							transform: translateY(100%);
							border: 8px solid transparent;
							border-top-color: #FFC64A;
						}
					}
				}

				.user-info {
					height: 100%;
					display: flex;
					align-items: center;
					cursor: pointer;

					.avatar {
						width: 50px;
						height: 50px;
						border-radius: 50%;
						margin-right: 10px;
					}

					.username {
						color: #fff;
						font-size: 15px;
						margin-right: 10px;
					}

					.vip-level {
						width: 40px;
						height: 16px;
						text-align: center;
						background: var(--bg-6);
						border-radius: 15px 15px 15px 15px;
						opacity: 1;
						font-size: 10px;
						font-family: Inter-Semi Bold Italic, Inter;
						font-weight: normal;
						color: #FFFFFF;
						line-height: 12px;
						font-style: italic;
						text-shadow: 0px 2px 2px #B63712;
						margin-right: 10px;
					}

					.uid {
						font-size: 13px;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: var(--color-5);
						line-height: 15px;
						margin-top: 4px;
					}
				}


				.login_btn {
					padding: 0px 38rpx;
					height: 30rpx;
					text-align: center;
					font-weight: 500;
					background: var(--bg-2);
					box-shadow: inset 0px 4px 4px 0px var(--box-shadow-color-1);
					border-radius: 50px;
					margin-right: 15px;
					/* #ifdef H5 */
					cursor: pointer;
					/* #endif */
					display: grid;
					place-items: center;
				}

				.ks_btn {
					word-wrap: unset;
					width: 80px;
					background: var(--color-1);
					box-shadow: 0px 0px 0px 0px var(--color-1);
					color: var(--color-7) !important;
					transition: all 0.1s ease-in-out;
					animation: jyFbsD 1.5s ease 0s infinite normal none running;
					margin: 0px;
					color: #fff;
					padding: 0;
				}
			}
		}

		.noContainer {
			height: 70px !important;
			/* #ifdef APP */
			height: 90px !important;
			padding: var(--status-bar-height) 15px 0 !important;
			/* #endif */
		}
	}

	// 小屏
	@media screen and (max-width: 768px) {
		.nav-wrap {
			padding: 0 15px;
			background: var(--bg-1);

			.container {
				width: 100%;
				display: flex;
				align-items: center;
				box-sizing: border-box;

				.nav-content {

					.nav-right {
						margin-left: 0;
						display: flex;
						justify-content: space-between;
						align-items: flex-end;

						.user-info {
							display: flex;
							align-items: center;

							.avatar {
								margin-right: 10px;
							}

							.username {
								font-size: 15px;
								font-family: PingFang SC-Bold, PingFang SC;
								font-weight: bold;
								color: #FFFFFF;
							}

							.vip-level {
								padding: 2px 8px;
							}

						}
					}

					.nav-left {
						margin-top: 10px;
					}
				}

				.navContent2 {
					width: 100vw;
					padding-top: calc(var(--status-bar-height) + 15px);
					/* #ifdef APP-PLUS */
					padding-top: calc(var(--status-bar-height) + 10px);
					/* #endif */

					.noLoginH5 {
						display: flex;
						flex-direction: column;
						width: 100%;
					}
				}
			}
		}

		.nav-wrap2 {
			padding-top: 15px;
			/* #ifdef H5 */
			padding-bottom: 15px;
			/* #endif */
			/* #ifdef APP */
			padding-top: calc(var(--status-bar-height) + 0px);
			padding-bottom: 15px !important;
			/* #endif */
		}

		.container {
			display: flex;
			justify-content: flex-end;
		}

		.nav-content {
			width: 100%;
			display: flex;
			justify-content: flex-end;
		}

		.nav-content .waves-wrap {
			background: var(--bg-4) !important;
			min-width: 90px !important;
			margin-right: 0 !important;
		}

		.nav-content .tooltip {
			top: -4px !important;
		}

		.nav-content .deposit {
			margin-right: 0px !important;
			padding: 5px !important;
		}

		.nav-content .sharearea .avatar {
			width: 30px !important;
			height: 30px !important;
			margin-right: 0 !important;
		}

		.nav-content .login_btn {
			margin-right: 15px !important;
		}

		.nav-content .ks_btn {
			width: 80px !important;
		}

		.nav-content .user-info {
			border-radius: 50% !important;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
		}
	}

	@keyframes fadeInDown {
		0% {
			opacity: 0;
			transform: translate3d(0, -100%, 0)
		}

		to {
			opacity: 1;
			transform: translateZ(0)
		}
	}

	@keyframes turntable {
		0% {
			transform: rotateZ(0deg);
		}

		100% {
			transform: rotateZ(360deg);
		}
	}

	@keyframes jyFbsD {

		10%,
		90% {
			transform: translate3d(-1px, 0, 0);
		}

		0% {
			transform: scale(1)
		}

		70% {
			transform: scale(1);
			box-shadow: 0 0 0 30px rgba(90, 153, 212, 0);
		}

		to {
			transform: scale(1);
			box-shadow: 0 0 rgba(90, 153, 212, 0);
		}
	}

	@keyframes trends {
		0% {
			transform: scale(0.9)
		}

		50% {
			transform: scale(1.1)
		}

		to {
			transform: scale(0.9)
		}
	}

	/deep/uni-switch .uni-switch-input {
		border-color: var(--color-1) !important;
	}

	/deep/uni-switch .uni-switch-input:before {
		width: 50px;
		background-color: var(--color-1) !important;
	}
</style>